<!DOCTYPE >
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>品牌管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>

    <style type="text/css">
        .active{
            background-color: gray;
        }
    </style>

    <script type="text/javascript">

        //新增按钮提交表单
        function addBrand() {
            var data=$("#addForm").serialize();
            $.ajax({
                url:"brand_add",
                data:data,
                type:"post",
                dataType:"json",
                success:function (result) {
                    //alert(JSON.stringify(result));
                    if(result.code==200){
                        alert(result.message);
                        location.href="brand_getBrands";
                    }else{
                        alert(result.message);
                    }
                }
            });
        }

        //跳更新页面
        function goupdate(id) {
            $.getJSON("brand_getBrandById",{"id":id},function (result) {
//                alert(JSON.stringify(result));
                //回显到更新页面
                $("#update_name").val(result.name);
                $("#update_first_char").val(result.first_char);
                $("#update_image").val(result.image);
                $("#update_id").val(result.id);

            });
        }

        function updateBrand() {
            var data =$("#updateForm").serialize();
            $.post("brand_update",data,function (result) {
//                alert(JSON.stringify(result));
                if(result.code==200){
                    alert("更新成功");
                    location.href="brand_getBrands";
                }else{
                    alert("更新失败");
                }
            },"json");
        }deleteBrand
        
//        删除
        function deleteBrand(id) {
            if(confirm("你想好昂")) {
                $.getJSON("brand_delete", {"id": id}, function (result) {
//                alert(JSON.stringify(result));
                    if(result.code==200){
                        alert("删除成功");
                        location.href="brand_getBrands";
                    }else{
                        alert("删除失败");
                    }
                });
            }
        }

        //全选
        function chAll(ck) {
            $("[name='child']").prop("checked",$(ck).prop("checked"));
        }
        //点击每个孩子
        function ckChild() {
            var totalcount=$("[name='child']").length;
            var selectcount=$("[name='child']:checked").length;
            if(totalcount==selectcount){
                $("#selall").prop("checked",true);
            }else{
                $("#selall").prop("checked",false);
            }
        }

        //批量删除
        function deleteSome() {
            var ids=new Array();
            var childs=$("[name='child']:checked");
            if(childs.length>0){
                for(var i=0;i<childs.length;i++){
                    var id=childs[i].value;
                    ids.push(id);
                }
                alert(ids);
                //发送异步请求
                $.ajax({
                    url:"brand_deleteSome",
                    data:"ids="+ids,
                    dataType:"json",
                    type:"post",
                    success:function (result) {
                        //alert(JSON.stringify(result));
                        if (result.code==200){
                            alert("批量删除成功");
                            location.href="brand_getBrands";
                        }else{
                            alert("批量删除失败")
                        }
                    }
                });
            }else {
                alert("选中之后再删除啊");
            }
        }

    </script>
</head>
<body class="hold-transition skin-red sidebar-mini">
<!-- .box-body -->
<div class="box-header with-border">
    <h3 class="box-title">品牌管理</h3>
</div>

<div class="box-body">

    <!-- 数据表格 -->
    <div class="table-box">

        <!--工具栏-->
        <div class="pull-left">
            <div class="form-group form-inline">
                <div class="btn-group">
                    <button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#addModel" ><i class="fa fa-file-o"></i> 新建</button>
                    <button type="button" class="btn btn-default" onclick="deleteSome();" title="批量删除" ><i class="fa fa-trash-o"></i> 批量删除</button>
                    <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
                </div>
            </div>
        </div>
        <div class="box-tools pull-right">
            <div class="has-feedback">

            </div>
        </div>
        <!--工具栏/-->

        <!--数据列表-->
        <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
            <thead>
            <tr>
                <th class="" style="padding-right:0px">
                    <input id="selall" type="checkbox" onclick="chAll(this);" class="icheckbox_square-blue">
                </th>
                <th class="sorting_asc">品牌ID</th>
                <th class="sorting">品牌名称</th>

                <th class="sorting">品牌首字母</th>
                <th class="text-center">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="brand:${pageUtils.records}">
                <td><input th:value="${brand.id}" type="checkbox"  name="child" onclick="ckChild();"></td>
                <td th:text="${brand.id}"></td>
                <td th:text="${brand.name}"></td>
                <td th:text="${brand.first_char}"></td>
                <td class="text-center">
                    <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" th:onclick="|goupdate(${brand.id});|" data-target="#editModal"  >修改</button>
                    <button type="button" class="btn bg-red btn-xs" data-toggle="modal"  th:onclick="|deleteBrand(${brand.id});|" >删除</button>
                </td>
            </tr>
            </tbody>
        </table>
        <!--数据列表/-->
        <!-- 分页组件 -->
        <div class="row">
            <div class="col-sm-6"><div class="dataTables_paginate paging_bootstrap" id="sample-table_paginate">
                <ul class="pagination">
                    <li class="prev"><a th:href="|brand_page?pageIndex=1&pageSize=${pageUtils.pageSize}|">首页</a></li>
                    <li class="prev" th:if="${pageUtils.pageIndex>1}"><a th:href="|brand_page?pageIndex=${pageUtils.pageIndex-1}&pageSize=${pageUtils.pageSize}|">上一页</a></li>

                    <li class="next" th:each="num:${pageUtils.numbers}" th:class="${pageUtils.pageIndex==num}? active"><a th:href="|brand_page?pageIndex=${num}&pageSize=${pageUtils.pageSize}|" th:text="${num}">XXX</a></li>

                    <li class="next" th:if="${pageUtils.pageIndex<pageUtils.pageCount}"><a th:href="|brand_page?pageIndex=${pageUtils.pageIndex+1}&pageSize=${pageUtils.pageSize}|">下一页</a></li>
                    <li class="next"><a th:href="|brand_page?pageIndex=${pageUtils.pageCount}&pageSize=${pageUtils.pageSize}|">尾页</a></li>
                    <li class="next"><a href="#" th:text="|当前${pageUtils.pageIndex}/${pageUtils.pageCount}页|"></a></li>
                    <li class="next"><a href="#" th:text="|共${pageUtils.totalCount}条|">XXX</a></li>
                </ul>
            </div>
            </div>
        </div>
        <!-- 分页组件 -->
    </div>
    <!-- 数据表格 /-->
</div>
<!-- /.box-body -->

<!-- 编辑窗口 -->
<form action="#" method="post" id="updateForm">
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">品牌编辑</h3>
            </div>
            <div class="modal-body">
                <table class="table table-bordered table-striped"  width="800px">
                    <tr>
                        <td>品牌名称</td>
                        <td>
                            <input type="hidden" name="id" id="update_id" />
                            <input  class="form-control" placeholder="品牌名称" name="name" id="update_name">  </td>
                    </tr>
                    <tr>
                        <td>首字母</td>
                        <td><input  class="form-control" placeholder="首字母" name="first_char" id="update_first_char">  </td>
                    </tr>

                    <tr>
                        <td>品牌图片</td>
                        <td><input  class="form-control" placeholder="品牌图片" name="image" id="update_image">  </td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="updateBrand();">保存</button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>
</form>
<form  id ="addForm" action="#" method="post">
<div class="modal fade" id="addModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel1">品牌编辑</h3>
            </div>
            <div class="modal-body">
                <table class="table table-bordered table-striped"  width="800px">
                    <tr>
                        <td>品牌名称</td>
                        <td><input  class="form-control" placeholder="品牌名称" name="name" >  </td>
                    </tr>
                    <tr>
                        <td>首字母</td>
                        <td><input  class="form-control" placeholder="首字母" name="first_char">  </td>
                    </tr>

                    <tr>
                        <td>品牌图片</td>
                        <td><input  class="form-control" placeholder="品牌图片" name="image">  </td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="addBrand();">新增</button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>
</form>
</body>
</html>